<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 父组件模板 -->
    <div id="app">
        <!-- 监听发射的事件，处理事件 -->
        <cpn @item-click='cpnClick'></cpn>
    </div>

    <!-- 子组件模板 -->
    <template id="cpn">
        <div>
            <button v-for="item in catagories"
                    @click="btnClick(item)"
            >{{item.name}}</button>
        </div>
       
    </template>
    <script src="../js/vue.js"></script>
    <script>
        // 子组件
       let cpn = {
           template:'#cpn',
           data() {
               return{
                   catagories:[
                       {id:'aaa',name:"热门推荐"},
                       {id:'bbb',name:"手机数码"},
                       {id:'ccc',name:"京东家店"},
                       {id:'ddd',name:"电脑办公"}
                   ]
               }
           },
           methods:{
            btnClick(item){
                // console.log(item.id);
                // 发射事件:自定义事件  子传父就是通过自定义事件实现的
                this.$emit('item-click',item)
            }
           }
       }

    //    父组件
        const app = new Vue({
            el:'#app',
            components:{
                cpn
            },
            methods:{
                cpnClick(item){
                    console.log("cpnClick",item)
                }
            }
        })
    </script>
</body>
</html>